<template>
    <div id="docxRef"></div>
</template>
<script setup lang="ts">
    import {renderAsync} from 'docx-preview'
    import {reactive} from 'vue';
    import {useRoute} from 'vue-router'
    import {loadFile} from '@/api/report/index';
    import {ILoadFileParams} from '@/types/report'
    const route = useRoute()
    //预览文档配置
   const docxOptions = reactive({
       className : "docx", // 默认和文档样式类的类名/前缀
       inWrapper:true, // 启用围绕文档内容渲染包装器
       ignoreWidth:false, // 禁止页面渲染宽度
       ignoreHeight : false, // 禁止页面渲染高度
       ignoreFonts:  false, // 禁止字体渲染
       breakPages: true, // 在分页符上启用分页
       ignoreLastRenderedPageBreak: true,//禁用lastRenderedPageBreak元素的分页
       experimental: false, //启用实验性功能（制表符停止计算）
       trimXmlDeclaration:  true, //如果为真，xml声明将在解析之前从xml文档中删除
       showChanges:false,
       debug:  false, // 启用额外的日志记录
   })
   //下载文件参数
    const downLoadParams :ILoadFileParams=reactive({
        taskType:1,
        taskid:''
    })
    downLoadParams.taskid = route.query.taskId as string
    //生成报告
    const generateReports=()=>{
        loadFile(downLoadParams).then(({ data }) =>{
            renderAsync(data,document.getElementById("docxRef")as any,null as any,docxOptions)
        })
    }
    generateReports()
</script>
<style scoped lang="scss">

</style>